<template>
  <el-dialog
    title="添加用户"
    :visible.sync="this.$store.state.adduserShow"
    width="50%"
    :lock-scroll="false"
    @close="addUserClose"
  >
    <el-form
      :model="userForm"
      :rules="userRules"
      ref="userRef"
      label-width="70px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userForm.email"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="userForm.mobile"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="closeClick">取 消</el-button>
      <el-button type="primary" @click="addUser">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {addUser} from 'network/homelist'
export default {
	
  data () {
		var checkEmail = (rule, value, callback) => {
			const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
			if(regEmail.test(value)){
				return callback()
			}
			callback(new Error('请输入合法邮箱'))
		}
		var checkTel = (rule, value, callback) => {
			const regTel = /^(0|86|17951)?(13[0-9]|15[0-9]|17[678]|18[0-9]|14[57])[0-9]{8}$/
			if(regTel.test(value)){
				return callback()
			}
			callback(new Error('请输入合法手机号'))
		}
    return {
      userForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      userRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {validator : checkEmail, trigger : 'blur'}
        ],
        mobile: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          {validator : checkTel, trigger : 'blur'}
        ]
      }
    }
  },
  // props: {
  //   isShow: {
  //     type: Boolean,
  //     default: false
  //   }
  // },
  methods: {
    // showClick () {
    //   this.$emit('showClick')
    // },
    addUserClose(){
      // console.log(this.$refs.userRef)
      this.$refs.userRef.resetFields()
    },
    closeClick(){
      this.$store.commit('closeUser')
    },
    addUser(){
      this.$refs.userRef.validate(valid => {
        if(!valid) return this.$Message.error("用户信息输入错误")
        console.log(this.userForm)
        addUser(this.userForm).then(res => {
          console.log(res)
          if(res.data.meta.status !== 201){
            this.$Message.error(res.data.meta.msg)
          }else{
            this.$emit('addUserSuccess')
          }
        })
      })
    },
    userClose(){
      this.$store.commit('closeUser')
    }
  }
}
</script>
<style lang="less" scoped></style>
